<script setup name="order">
import {reactive,ref,computed} from 'vue'
import storage from '@/utils/storage'
import {onShow, onLoad} from '@dcloudio/uni-app'
import OrderItem from "@/global/components/orderItem/OrderItem.vue";
import {useOrderData} from './hooks/useOrderData'

const tabList = reactive([
  {name: '全部订单'},
  {name: '待接单', id: 0},
  {name: '待收货', id: 2},
  {name: '待评价', id: 3},
  {name: '已取消', id: -1},
  {name: '已完成', id: 4},
]);
const recevieTabs = reactive([
  {name: '全部订单'},
  {name: '待送达', id: 1},
  {name: '待评价', id: 3},
  {name: '已完成', id: 4},
])
const {getOrderData, orderList, handleClickTab, loading, orderParams} = useOrderData()
const userInfo = storage.get('userInfo')
const type = ref('create')
onLoad((option) => {
  type.value = option.type
  if(option.type === "create") {
    uni.setNavigationBarTitle({title: '我下的订单'})
    orderParams.receiveUserId = null
    getOrderData()
  } else {
    uni.setNavigationBarTitle({title: '我接的订单'})
    uni.setNavigationBarColor({
      backgroundColor: '#e64340'
    });
    orderParams.receiveUserId = userInfo.id
    getOrderData()
  }
})
const tabs = computed(() => type.value ==='create' ? tabList : recevieTabs)
const handleToCreateOrder = () => uni.navigateTo({ url: '/pages/createOrder/createOrder' });

const handleToReceiveOrder = () => uni.navigateTo({ url: '/pages/recevieOrder/recevieOrder' })

const handleToOrderDetail = ({ id }) => uni.navigateTo({ url: '/pages/order/orderDetail?id=' + id })
</script>

<template>
  <view class="order-container">
    <up-tabs @tap="handleClickTab" lineWidth="50" :list="tabs"></up-tabs>
    <up-loading-icon v-if="loading" text="加载中"/>
    <view class="order-content" :class=" { 'order-empty': orderList.length===0} " v-else>
      <blockquote v-if="!orderList.length">
        <up-empty class="empty-box" text="空空如也~" />
        <up-button class="empty-btn" @click="handleToCreateOrder" v-if="type === 'create'" shape="circle" size="small" type="primary" text="去下单" />
        <up-button class="empty-btn" @click="handleToReceiveOrder" v-else shape="circle" size="small" type="error" text="去接单" />
      </blockquote>
      <blockquote v-else>
        <order-item
            :refreshData="getOrderData"
            :showOrderTime="false"
            v-for="order in orderList"
            :key="order.id"
            :order="order"
            @click="() => handleToOrderDetail(order)"
        />
      </blockquote>
    </view>
  </view>
</template>

<style scoped lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding: 10rpx 20rpx 20rpx 20rpx;
  overflow: hidden;
  height: 100%;
}
:deep(.uni-page-head-btn) {
  display: block !important;
}
.order-container {
  height: calc(100% - 50px);

  .u-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.order-content {
  height: 100%;
  padding: 10rpx 14px;
  overflow: auto;
}
.order-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  .empty-btn {
    margin-top: 25rpx;
  }
}
</style>
